<template>
  <div class="header-containe flex-box">
    <div class="header-left flex-box">
      <el-icon @click="isMenu" class="icon" size="20"><Fold/></el-icon>
      <ul class="flex-box">
        <li v-for="item,index in selectMenu" 
        :key="item.path" 
        :class="{select: item.path === route.path}"
        class="tab flex-box">
          <el-icon  size="15"><component :is="item.icon"/></el-icon>
          <router-link
            :to="item.path"
            :class="{select: item.path === route.path}"
            class="flex-box txt">
            {{item.name}}
          </router-link>
          <el-icon @click="closeTab(item,index)" class="close" size="15"><Close /></el-icon>
        </li>
      </ul>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleClick">
        <div class="el-dropdown-link flex-box">
          <el-avatar
            :src="userInfo.avatar"
          />
          <p class="user-name">{{userInfo.name}}</p>
        </div>
        <template #dropdown >
          <el-dropdown-menu>
            <el-dropdown-item command="cancel">登出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import {useStore} from 'vuex'
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const store = useStore()

// 获取当前路由
const route = useRoute()
// 获取路由对象
const router = useRouter()
// 监听路由变化，更新选中菜单
console.log(route)

const selectMenu = computed(()=>store.state.menu.selectMenu)
const isMenu = ()=>{
  store.commit('collapseMenu')
  // console.log(store.state.menu.isCollapse)
}
// 关闭选项卡
const closeTab=(item,index)=>{
  store.commit('closeMenu',item)
  console.log(route.path)
  // 如果关闭的是当前选中的选项卡，则跳转到后面选项卡
  // console.log(store.state.menu.selectMenu)
  if(item.path !== route.path) {return}
  // 
  const selectMenuData = selectMenu.value
  if(index === selectMenuData.length){
    if(!selectMenuData.length){
      router.push('/')
    }else{
      router.push({
        path:selectMenuData[index-1].path
      })
    }
  }else{
    router.push({
      path:selectMenuData[index].path})
  }

}

// 处理下拉菜单点击事件
const handleClick = (command)=>{
  if(command === 'cancel'){
    localStorage.removeItem('pz_token')
    localStorage.removeItem('pz_userInfo')
    localStorage.removeItem('pzadmin')
    // router.push('/login')
    window.location.href = window.location.origin
  }
}

// 获取用户信息
const userInfo =JSON.parse( localStorage.getItem('pz_userInfo'))

</script>

<style lang="less" scoped>
.flex-box{
  display: flex;
  align-items: center;
}
.header-containe{
  justify-content: space-between;
  height: 100%;
  background-color: white;
  padding-right: 25px;
  .header-left{
    height: 100%;
    ul{
      height: 100%;
    }
    .icon{
      width: 45px;
      height: 100%;
      cursor: pointer;
      // &:hover{
      //   background-color: #f5f5f5;
      // }
    }
    .tab{
      padding: 0 12px;
      height: 100%;
      .txt{
        margin: 0 5px;
      }
      .close{
        visibility: hidden;
      }
      &:hover{
        background-color: #f5f5f5;
        height: 100%;
        .close{
          visibility: initial;
          cursor: pointer;
          color: #000;
        }
      }
    }
    .select{
      background-color: #f5f5f5;
      color: #409eff !important;
      .el-icon{
        color: #409eff;
      }
    }
  }
  .header-right{
    .user-name{
      margin-left: 10px;
    }
  }
  a{
    text-decoration: none;
    color: #333;
    font-size: 15px;
  }
}
</style>